<script setup lang="ts">
import { DIR_INDEX_NAME } from '../constants';
import MenuItem from './menu-item.vue';

interface Props {
  list?: Array<any>;
}

const { list } = defineProps<Props>();

const emit = defineEmits(['click', 'update:list']);
const menuRef = ref();

const manualActive = ref(false);

const handleSelect = () => {
  manualActive.value = false;
};

let showDisable = $ref(true);

const handleHideDisable = () => {
  showDisable = !showDisable;
};

const gridStyle  = computed(() => {
	return (item) => {
    const _lists = list?.[item]?.functions?.filter(item => {
      return item.status === 0;
    });
    
    return showDisable ? { 'grid-template-rows': `repeat(${list?.[item]?.functions?.length}, auto)` } :
      { 'grid-template-rows': `repeat(${_lists?.length}, auto)` };
  };
});

const handleClick = (data, name, pid) => {
  emit('click', { data, name, pid });
};
</script>

<template>
  <div class="f9-menu">
    <vc-menu mode="horizontal" @select="handleSelect" ref="menuRef" :ellipsis="false">
      <vc-sub-menu :toolTipCfg="{ showArrow: true }" :showArrow="false"
        :index="DIR_INDEX_NAME" :key="DIR_INDEX_NAME" popper-class="f9-menu-popover f9-menu-popover-dir">
        <template #title>目录</template>
        <div v-for="(item, index) in [[0], [1, 2], [3, 4], [5, 6], [7, 8], [9]]" :key="index" class="content-main">
          <template v-for="(subItem, subIndex) in item" :key="subIndex">
            <div class="content-col" v-if="list?.[subItem]">
              <span class="title">{{ list?.[subItem]?.name }}</span>
              <div class="content" :style="gridStyle(subItem)">
                <menu-item :showDisable="showDisable" isDir
                  @click="(data) => handleClick(data, list?.[subItem]?.name, list?.[subItem]?.id)" :list="list?.[subItem]?.functions" :parentId="list?.[subItem]?.id"/>
              </div>
            </div>
          </template>
        </div>
      </vc-sub-menu>
      <vc-sub-menu :toolTipCfg="{ showArrow: true }" :showArrow="false" :index="item.id" v-for="(item, index) in list" :key="index" popper-class="f9-menu-popover">
        <template #title>{{ item.name }}</template>
        <menu-item @click="(data) => handleClick(data, item.name, item.id)" :showDisable="showDisable" :list="item.functions" />
      </vc-sub-menu>
    </vc-menu>
  </div>
  <div class="bottom_shadow"></div>
</template>

<style scoped lang="scss">
.f9-menu {
  position: sticky;
  top: 0;
  z-index: $f9-menu-z-index;
  width: 100%;
  background-color: #FFFFFF;
  :deep(.vc-menu) {
    width: 1200px;
    margin: auto;
    display: flex;
    gap: 40px;
    background-color: transparent;
    border: 0px;
    .vc-sub-menu {
      padding: 0;
      background-color: transparent;
      .vc-sub-menu__title {
        font-size: 16px;
        font-weight: 500;
        padding: 0;
        // line-height: 24px;
      }
    }
  }
}
.bottom_shadow{
  position: sticky;
  top: 0;
  height: 58px;
  margin-top: -58px;
  box-shadow:  0 10px 10px -10px #f3f3f3;
  z-index: $f9-menu-z-index;
}
</style>
